<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Login</title>
        <h:outputStylesheet library="bootstrap/css" name="bootstrap.css" />
        <h:outputStylesheet library="css" name="font-awesome.css" />
        <h:outputStylesheet library="css" name="endless.css" />
    </h:head>
    <h:body>
        <div class="login-wrapper">
            <div class="text-center">
                <h2 class="fadeInUp animation-delay8" style="font-weight:bold">
                    <span class="text-success">Vale Esperar</span> <span style="color:#ccc; text-shadow:0 1px #fff"></span>
                </h2>
            </div>
            <div class="login-widget animation-delay1">
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <div class="pull-left">
                            <i class="fa fa-lock fa-lg"></i> Login
                        </div>

                    </div>
                    <div class="panel-body">
                        <h:form styleClass="form-login" >
                            <p:growl id="msgGlobal" globalOnly="true" showSummary="true" showDetail="true"/>
                            <div class="form-group">
                                <label>Username</label>

                                <p:inputText styleClass="form-control input-sm bounceIn animation-delay2"
                                             required="true"
                                             value="#{loginBean.username}" />

                            </div>
                            <div class="form-group">
                                <label>Password</label>
                                <p:password styleClass="form-control input-sm bounceIn animation-delay4" 
                                            required="true"
                                            value="#{loginBean.password}" />
                            </div>
                            <div class="form-group">
                                <label class="label-checkbox inline">
                                    <input type="checkbox" class="regular-checkbox chk-delete" />
                                    <span class="custom-checkbox info bounceIn animation-delay4"></span>
                                </label>
                                Remember me
                            </div>

                            <div class="seperator"></div>
                            <div class="form-group">
                                Forgot your password?<br/>
                                Click <a href="#">here</a> to reset your password
                            </div>

                            <hr/>
                            <p:commandButton styleClass="btn btn-success btn-sm bounceIn animation-delay5 login-link pull-right" 
                                             value="Sign in" update="msgGlobal"
                                             action="#{loginBean.login()}"/>
                        </h:form>
                    </div>
                </div><!-- /panel -->
            </div><!-- /login-widget -->
        </div><!-- /login-wrapper -->
        <h:outputScript library="bootstrap/js" name="bootstrap.js" />
        <h:outputScript library="js" name="modernizr.min.js" />
        <h:outputScript library="js" name="pace.js" />
        <h:outputScript library="js" name="jquery.popupoverlay.min.js" />
        <h:outputScript library="js" name="jquery.slimscroll.min.js" />
        <h:outputScript library="js" name="jquery.cookie.min.js" />
        <!--h:outputScript library="js/endless" name="endless.js" /-->
    </h:body>
</html>

